<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <div class="lesson_index">
                <div class="swiper-div">
                    <div class="carousel-container">
                        <el-carousel :interval="4000" arrow="always" height="300px">
                            <el-carousel-item v-for="(item, index) in swiperList" :key="index">

                                <img :src="item.coverImage" alt="" style="width: 100%; height: auto;">
                            </el-carousel-item>
                        </el-carousel>
                    </div>

                    <div class="mylessonAll">
                        <span class="title">我的课程</span>
                        <div class="list">
                            <div class="course-group">
                                <div v-if="mylessonTotal > 0"
                                    style="display: flex;align-items: center;flex-wrap: wrap;">
                                    <div v-for="(item, index) in list" :key="index" class="scroll-list"
                                        style="flex-direction: row;" @click="mylesson(item)">
                                        <div class="course-tab">
                                            <img :src="item.courseTypeImage" alt="" />
                                            <p class="items"><b>{{ item.courseTypeName }}</b>{{
                                                item.courseTypeDescs }}</p>
                                            <!-- 	<div class="study">
											<span>去学习</span>
										</div> -->
                                        </div>
                                    </div>

                                </div>
                                <div v-else class="" style="text-align: center;font-size: 28px;color:#ccc">
                                    <el-empty description="还没有购买记录哦~去看看喜欢的课程吧"></el-empty>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="jiaoliu">
                        <div class="" style="display: flex;align-items: center;">
                            <span style="width: 6px;height: 20px;background-color: #ff8342;margin-left: 10px"></span>
                            <span class="title" style="padding-left: 5px;">全部课程</span>
                        </div>
                        <div class="list">

                            <div class="course-group course-group1" v-for="(item, u) in categoryList"
                                @click="jump(item)" :key="u">

                                <div class="left">
                                    <img :src="item.image" alt="" />
                                </div>
                                <div class="right">

                                    <div class="content">
                                        <div>

                                            <span class="item"><b>{{ item.name }}</b>：{{ item.descs }}</span>
                                        </div>

                                        <p v-if="item.isBuy" class="isbuy">购买人数：{{ item.isBuy }}人</p>
                                        <div class="price">
                                            <span class="left_price">上新特惠</span>
                                            <span class="price_item">￥{{ item.price }}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

import { courseTypeList, bannerList, listLockCourse } from '@/api/index'

export default {
    computed: {
        currentPath() {
            return this.$route.path; // 获取当前路由路径
        },
    },
    data() {
        return {
            courseType: "",
            categoryList: [],
            buyItem: "",
            mylessonTotal: 0,
            swiperList: [

            ],
            list: [
                { sid: 0, src: '自定义src0', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 1, src: '自定义src1', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 2, src: '自定义src2', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" },
                { sid: 3, src: '自定义src3', img: 'https://www.leedong.top/3.jpg', text: "使得房价来说哦世界的分厘卡士大夫受到法律" }
            ]
        }
    },
    methods: {
        getBanner() {
            bannerList({}).then((res) => {


                this.swiperList = res;


            })
        },
        toSwiper(item) {
            if (item.bannerTypeId == 1) {
                uni.navigateTo({
                    url: "/pages/lesson/list?id=" + item.dataId + '&img=' + item.coverImage
                })
            } else {
                uni.navigateTo({
                    url: "/pages/shop/shopDetails?id=" + item.dataId
                })
            }
            console.log(item)
        },
        getlistLockCourse() {
            listLockCourse({ userId: "11" }).then((res) => {
                if (res.code != 200) {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                    return;
                }

                if (res) {
                    this.list = res.rows;
                    this.mylessonTotal = res.total;
                }

            })
        },
        mylesson(item) {
            let data = {
                id: item.courseId,
                image: item.courseTypeImage,
                courseTypeDescs: item.courseTypeDescs,
                isBuy: 1,

            }
            uni.navigateTo({
                url: "/pages/lesson/list?buyItem=" + JSON.stringify(data)
            })
        },
        jump(item) {
            this.$router.push({
                name: "lessonList",
                query: {
                    buyItem: JSON.stringify(item)
                }
            })

        },
        getListTypeLeft() {
            courseTypeList({
                courseType: '1'
            }).then((res) => {
                console.log(res)

                if (res.code == 200) {
                    this.categoryList = res.data;

                    this.buyItem = res.data[0];

                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    })
                }


            })
        },
    },
    mounted() {
        this.getListTypeLeft()
        this.getBanner()
        this.getlistLockCourse()
    }
}
</script>

<style lang="scss" scoped>
.lesson_index {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

    .swiper-div {

        .swiper {
            width: 100%;
            height: 350upx;

            image {
                width: 100%;
                height: 350upx;
            }
        }

        .keep-out {
            width: 100%;
            height: 30upx;
            border-radius: 100% 100% 0 0;
            background-color: #ff570a;
            margin-top: -15upx;
            position: absolute;
        }
    }

    .jiaoliu {
        width: 100%;
        background-color: #fff;
        margin: auto;

        .title {
            font-size: 17px;
            font-weight: 800;
            padding: 10px 0;
            display: inline-block;
            background: #fff;
        }

        .list {

            display: flex;
            flex-wrap: wrap;


            .course-group {
                display: flex;

                margin-top: 10px;
                margin-bottom: 10px;
                border-bottom: 1px solid #f9eded;
                width: 24.5%;
                box-shadow: 0 4px 8px 0 rgba(95, 101, 105, .05);
                border-radius: 8px;
                margin-left: 5px;

                .left {
                    margin: 5px;
                    width: 27%;

                    img {
                        width: 100%;
                        height: 80px;
                    }
                }

                .right {
                    width: 70%;

                    .first {
                        font-size: 30upx;
                        font-weight: 800;
                        padding-top: 5px;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                    }

                    .content {


                        .item {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            color: #545c63;
                            line-height: 20px;
                            height: 40px;
                            margin-bottom: 8px;
                            padding: 0 8px;
                        }

                        .isbuy {
                            font-size: 15px;
                            color: #9199a1;
                            line-height: 18px;
                            padding: 0 8px;


                        }

                        .price {
                            display: flex;
                            align-items: center;
                            margin-left: 7px;
                            margin-top: 6px;

                            .left_price {
                                font-size: 12px;

                                line-height: 18px;
                                padding: 5px;
                                color: #fff;
                                background-color: rgba(242, 13, 13, .6);
                                border-radius: 5px;
                            }

                            .price_item {
                                font-size: 18px;
                                color: #ff8342;
                                line-height: 18px;
                                padding: 0 8px;
                            }
                        }

                        .cishu {
                            margin-top: 10px;
                        }

                        text {
                            font-size: 28px;
                            color: #ab9a9a;
                        }
                    }
                }


            }

            .course-group1 {
                display: flex;
                flex-direction: column;
                padding: 10px;

                margin-top: 0;
                border-bottom: none;

                .left {
                    margin: 5px;
                    width: 98%;

                    img {
                        width: 100%;
                        height: 180px;
                    }
                }

                .right {
                    width: 97%;
                    margin: auto;

                    .first {
                        font-size: 17px;
                    }

                    .content {
                        .item {
                            font-size: 14px;
                        }
                    }

                }
            }
        }
    }

    .mylessonAll {
        background: #fff;

        margin-top: 10px;

        .title {
            font-size: 17px;
            font-weight: 800;
            padding: 15px 0 0 15px;
            display: inline-block;
            background: #fff;
        }

        .list {



            .course-group {

                margin-top: 10px;

                .scroll-list {
                    width: 25%;
                    padding: 10px;
                    box-shadow: 0 4px 8px 0 rgba(95, 101, 105, .05);
                    border-radius: 8px;
                    height: 214px;

                    .course-tab {
                        width: 100%;
                        height: 150px;

                        text-align: center;


                        .items {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            color: #545c63;
                            line-height: 20px;
                            height: 40px;
                            margin-bottom: 8px;
                            padding: 0 8px;
                        }

                        img {
                            width: 100%;
                            height: 100%;

                        }

                        .study {
                            display: inline-block;
                            border: 2px solid #ff8342;

                            padding: 3px;
                            width: 50px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            border-radius: 10px;
                            font-size: 28px;
                        }
                    }
                }

            }
        }
    }
}
</style>